<template>
  <div class="x-grade" v-if="gradData">
    <div class="x-grade-list">
      <x-image :src="$ala.urlImage(gradData.Icon)" v-if="gradData.Icon"></x-image>
      <x-image :src="$ala.urlImage(gradData.icon)" v-else></x-image>
      <div class="grade-name">{{gradData.Name? gradData.Name:gradData.name}}</div>
    </div>
  </div>
</template>

<script>
  import ala from 'ala'
export default {
    model: {
      prop: 'dataModel',
      event: 'change'
    },
    props: {
      dataModel: {}
    },
    data () {
      return {
        viewModel: null,
        gradData: null
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var gradData = this.$ala.vuexLocalGet('grade_local_data',true)
        if (!gradData) {
          var response = await this.$ala.httpGet('api/Grade/GetAllGrade')
          this.viewModel = response
          this.$ala.vuexLocalSet('grade_local_data', this.viewModel,true)
        } else {
          this.viewModel = gradData
        }
        this.gradData = this.viewModel.find(r => r.id === this.dataModel)
      }
    },
    watch: {
      'dataModel': {
        deep: true,
        handler: 'init'
      }
    }
  }
</script>

<style  lang="scss" scoped>
  @import "./var.scss";
</style>
